
<template>
    <div class="bread-crumb-comp">
         <div class="locate-box">
            <el-image class="locate-img" :src="locateImg" fit="contain" />
        </div>

        <div v-for="item in data" :key="'bread' + item.name" class="bread-wrap">

            <div v-if="item.fkey" class="bread" @click.stop="toJump(item)" v-lang="{lang: controlSto.language, lgid: item.fkey}">{{item.lable}}</div>
            <div v-else class="bread" @click.stop="toJump(item)">{{item.lable}}</div>

            <template v-if="item.skey">
                <span @click.stop="toJump(item)">-</span>
                <div v-if="item.skey" class="bread" @click.stop="toJump(item)" v-lang="{lang: controlSto.language, lgid: item.skey}">{{item.lable}}</div>
            </template>

            <div class="bread-line">></div>
        </div>
    </div>
</template>

<script setup>
    import { ref, reactive, toRefs } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
    import { controlStore } from '@/stores/control'
    import locateImg from '@/assets/img/locate.png'

    const props = defineProps({
        data: {
            type: Array,
            default: () => []
        }
    });
    const { data } = toRefs(props);

    const controlSto = controlStore();
	const router = useRouter();


    const toJump = (item) => {
        if(item.name && router.currentRoute.value.name != item.name) {
            router.push({ name: item.name, query: { origin: 'header'}});
        }
    };

</script>


<style lang="scss" scoped>
    .bread-crumb-comp {
        padding: 24px 0;
        .bread-wrap, .bread {
            display: inline-block;
        }
        .bread-wrap:last-child {
            font-weight: bolder;
            .bread-line {
                display: none;
            }
        }
        .bread {
            cursor: pointer;
        }
        .bread-line {
            display: inline-block;
            padding: 0 4px;
        }
        .locate-box {
            display: inline-block;
            padding-right: 8px;
            .locate-img {
                position: relative;
                top: 6px;
                width: 16px;
            }
        }
    }
</style>
